var $ = document.querySelector.bind(document);
var $$ = document.createElement.bind(document);
var $$$ = document.querySelectorAll.bind(document);
var container = $(".container");
const urlList = [
    "avatar/IMG_11.jpg",
    "avatar/IMG_12.jpg",
    "avatar/IMG_13.jpg",
    "avatar/IMG_14.jpg",
    "avatar/IMG_15.jpg",
    "avatar/IMG_16.jpg",
    "avatar/IMG_1695859516766.jpg",
    "avatar/IMG_169900010724551.jpg",
    "avatar/IMG_169900010764824.jpg",
    "avatar/IMG_169900010764833.jpg",
    "avatar/IMG_1699019558750微信圖片_20231031172339.png",
    "avatar/IMG_1699020055654图片1.png",
    "avatar/IMG_169906327040810.jpg",
    "avatar/IMG_1699583647819abbed4202e41701eb1f9584dcdcfbf8.jpg",
    "avatar/IMG_16995836485169c656439ec1935c697dce6b5cb845d9.jpg",
    "avatar/IMG_1699583648715725a3598e1dd7875951c981e049cee2.jpg",
    "avatar/IMG_169958364936232c3d66316d49143087e6be08435c00.jpg",
    "avatar/IMG_16995836494033608ad00f30641afd8e5b57d42f8497.jpg",
    "avatar/IMG_1699583649918微信图片_20230610141530.jpg",
    "avatar/IMG_1699583649987eff048854ea3f22204cfcf5ca808a6f.jpg",
    "avatar/IMG_1699583768103c (13).jpg",
    "avatar/IMG_1699583768342c (9).jpg",
    "avatar/IMG_1699583768864c (11).jpg",
    "avatar/IMG_1699583769396c (14).jpg",
    "avatar/IMG_1699583769842c (17).jpg",
    "avatar/IMG_1699583769900c (15).jpg",
    "avatar/IMG_1699583769984c (10).jpg",
    "avatar/IMG_1699583770644c (19).jpg",
    "avatar/IMG_1699583771129c (12).jpg",
    "avatar/IMG_1699583771471c (16).jpg",
    "avatar/IMG_1699583771604c (21).jpg",
    "avatar/IMG_1699583772353c (18).jpg",
    "avatar/IMG_1699583773766c (22).jpg",
    "avatar/IMG_1699583776544c (20).jpg",
    "avatar/IMG_1699583779878c (23).jpg",
    "avatar/IMG_1699583780711c (25).jpg",
    "avatar/IMG_1699583781121c (24).jpg",
    "avatar/IMG_1699583781689c (26).jpg",
    "avatar/IMG_1699583782000c (27).jpg",
    "avatar/IMG_1699583782658c (28).jpg",
    "avatar/IMG_1699583783831c (29).jpg",
    "avatar/IMG_1699583786120c (30).jpg",
    "avatar/IMG_1699583787415c (31).jpg",
    "avatar/IMG_1699583787912c (32).jpg",
    "avatar/IMG_1699583788825c (33).jpg",
    "avatar/IMG_1699583789160c (34).jpg",
    "avatar/IMG_1699583797609c (35).jpg",
    "avatar/IMG_1699583798062c (37).jpg",
    "avatar/IMG_1699583798485c (39).jpg",
    "avatar/IMG_1699583798632c (36).jpg",
    "avatar/IMG_1699583799186c (40).jpg",
    "avatar/IMG_1699583799360c (38).jpg",
    "avatar/IMG_1699583800842c (41).jpg",
    "avatar/IMG_1699583805531c (42).jpg",
    "avatar/IMG_1699583809020c (43).jpg",
    "avatar/IMG_1699583810444c (44).jpg",
    "avatar/IMG_1699583811455c (2).jpg",
    "avatar/IMG_1699583811663c (1).jpg",
    "avatar/IMG_1699583812864c (3).jpg",
    "avatar/IMG_1699583813190c (4).jpg",
    "avatar/IMG_1699583814474c (6).jpg",
    "avatar/IMG_1699583814814c (5).jpg",
    "avatar/IMG_1699583815507c (7).jpg",
    "avatar/IMG_1699583817960c (8).jpg",
    "avatar/IMG_17.jpeg",
    "avatar/IMG_19.jpeg",
    "avatar/IMG_2.jpeg",
    "avatar/IMG_24.jpeg",
    "avatar/IMG_27.jpg",
    "avatar/IMG_3.jpg",
    "avatar/IMG_32.jpg",
    "avatar/IMG_33.jpg",
    "avatar/IMG_34.jpg",
    "avatar/IMG_35.jpg",
    "avatar/IMG_36.jpeg",
    "avatar/IMG_36.jpg",
    "avatar/IMG_37.jpg",
    "avatar/IMG_38.jpg",
    "avatar/IMG_39.jpg",
    "avatar/IMG_40.jpg",
    "avatar/IMG_41.jpeg",
    "avatar/IMG_41.jpg",
    "avatar/IMG_42.jpg",
    "avatar/IMG_43.jpg",
    "avatar/IMG_44.jpg",
    "avatar/IMG_45.jpg",
    "avatar/IMG_46.jpg",
    "avatar/IMG_47.jpg",
    "avatar/IMG_48.jpeg",
    "avatar/IMG_48.jpg",
    "avatar/IMG_49.jpg",
    "avatar/IMG_50.jpeg",
    "avatar/IMG_50.jpg",
    "avatar/IMG_51.jpg",
    "avatar/IMG_52.jpg",
    "avatar/IMG_53.jpg",
    "avatar/IMG_61.jpeg",
    "avatar/IMG_62.jpg",
    "avatar/IMG_8.jpg",
    "avatar/IMG_9.jpg"
]

function getData() {
    var itemList = $$$(".item")
    for (let i = 0; i < urlList.length; i++) {
        itemList[i].className = "item item" + i;
        itemList[i].addEventListener('mouseover', function (e) {
            var itemClass = e.target.classList[1];
            var now = parseInt(itemClass.split("item")[1])
            // 判断奇偶行
            var n = Math.floor(now / 10) % 2 === 1 ? 0 : -1;
            fangda(now);
            if (now + 1 <= urlList.length - 1) {
                suoxiao(now + 1);
            }
            if (now - 1>= 0) {
                suoxiao(now - 1);
            }
            if (now + 10-n < urlList.length) {
                suoxiao(now + 10-n)
            }
            if (now + 9-n < urlList.length) {
                suoxiao(now + 9-n)
            }
            if (now - 10-n>= 0) {
                suoxiao(now - 10-n)
            }
            if (now -11-n>= 0) {
                suoxiao(now - 11-n)
            }
        })
        itemList[i].addEventListener('mouseout', function (e) {
            var itemClass = e.target.classList[1];
            var now = parseInt(itemClass.split("item")[1])
            // 判断奇偶行
            var n = Math.floor(now / 11) % 2 === 1 ? 0 : -1;
            reset(now);
            if (now + 1 <= urlList.length - 1) {
                reset(now + 1);
            }
            if (now - 1 >= 0) {
                reset(now - 1);
            }
            if (now + 10-n < urlList.length) {
                reset(now + 10-n)
            }
            if (now + 9 -n< urlList.length) {
                reset(now + 9-n)
            }
            if (now - 10-n>= 0) {
                reset(now - 10-n)
            }
            if (now - 11-n>= 0) {
                reset(now - 11-n)
            }
        })
        setTimeout(() => {
            itemList[i].style = `background-image: url('http://resource.shuonihao.cn/${urlList[i]}');background-size: cover; `

        }, 10)
    }
}
getData()
// 缩小
function suoxiao(n) {
    $(".item" + n).style.transform = "scale(0.6)"
    $(".item" + n).style.opacity = "0.8"
}
// 放大
function fangda(n) {
    $(".item" + n).style.transform = "scale(1.4)"
    $(".item" + n).style.opacity = "1"
}

// 重置
function reset(n) {
    $(".item" + n).style.transform = "scale(1)"
    $(".item" + n).style.opacity = "0.8"
}